<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xport,
        .btn {
            display: inline;
            text-align: center;
        }

        a {
            text-decoration: none
        }

        #data-table {
            width: 100%;
            border-collapse: collapse;
        }

        #data-table,
        #data-table th,
        #data-table td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <input type="file" id="file" />
    <div id="container"></div>
    <script type="text/javascript" src="./js/shim.min.js"></script>
    <script type="text/javascript" src="./js/xlsx.full.min.js"></script>
    <script type="text/javascript">
        var input_dom_element = document.getElementById("file");

        function process_wb(wb) {
            // wb.Sheets[Sheet名]获取第一个Sheet的数据
            // wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            var ws = wb.Sheets[wb.SheetNames[0]];
            // var html_string = XLSX.utils.sheet_to_html(ws, {
            //     id: "data-table",
            //     editable: true
            // });
            // document.getElementById("container").innerHTML = html_string;


            // console.log(wb.Sheets[wb.SheetNames[0]]);//带有表格格式的对象
            let tab_content = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            console.log(tab_content);

        }

        function handle_ie() {
            var path = input_dom_element.value;
            var data = IE_LoadFile(path);
            var wb = XLSX.read(data, {
                type: 'binary'
            });
            process_wb(wb);
        }

        function handle_fr(e) {
            var files = e.target.files,
                f = files[0];
            var reader = new FileReader();
            var rABS = !!reader.readAsBinaryString;
            reader.onload = function (e) {
                var data = e.target.result;
                if (!rABS) data = new Uint8Array(data);
                var wb = XLSX.read(data, {
                    type: rABS ? 'binary' : 'array'
                });
                process_wb(wb);
            };
            if (rABS) reader.readAsBinaryString(f);
            else reader.readAsArrayBuffer(f);
        }

        var handler = typeof IE_LoadFile !== 'undefined' ? handle_ie : handle_fr;
        if (input_dom_element.attachEvent) {
            input_dom_element.attachEvent('onchange', handler)
        } else {
            input_dom_element.addEventListener('change', handler, false);
        };
    </script>
</body>

</html>